<template>
  <div class="head-container">
    <el-input
      v-model="deptName"
      placeholder="请输入部门名称"
      clearable
      prefix-icon="Search"
      style="margin-bottom: 20px"
    />
  </div>
  <div class="head-container">
    <el-tree
      :data="deptOptions"
      :props="{ label: 'label', children: 'children' }"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="deptTreeRef"
      node-key="id"
      highlight-current
      default-expand-all
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup>
import { deptTreeSelect } from "@/api/system/user";
const deptTreeRef = ref()
const deptOptions = ref([]);
const deptName = ref('')
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
}

function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
}
watch(deptName, (val) => {
  deptTreeRef.value.filter(val);
});
onMounted(() => {
  getDeptTree()
}),
</script>

<style lang="scss" scoped></style>
